<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="find.NoticeTitle" placeholder="请输入公告标题" class="handle-input mr10"></el-input>
                <el-button type="success" @click="Show()">查询</el-button>
                <el-button type="success" @click="dialogFormVisible = true">添加</el-button>
            </div>
            <el-row>
                <el-col :span="24">
                    <!--公告消息列表-->
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column prop="noticeId" label="序号" width="50"></el-table-column>
                        <el-table-column prop="noticeTitle" label="标题" width="120"> </el-table-column>
                        <el-table-column label="发送类型" show-overflow-tooltip width="120">
                            <template slot-scope="scope">
                                <div v-if="scope.row.userType == 1">
                                    <el-tag type="danger">全员公告</el-tag>
                                </div>
                                <div v-else>
                                    <el-tag type="success">部门通知</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="noticeContent" label="内容" width="300"> </el-table-column>
                        <el-table-column label="状态" show-overflow-tooltip width="120">
                            <template slot-scope="scope">
                                <div v-if="scope.row.status == 1">
                                    <el-tag type="danger">正常</el-tag>
                                </div>
                                <div v-else-if="scope.row.status == 2">
                                    <el-tag type="success">已撤销</el-tag>
                                </div>
                                <div v-else-if="scope.row.status == 3">
                                    <el-tag type="success">已删除</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createdUser" label="创建人" width="100"> </el-table-column>
                        <el-table-column prop="createdTime" label="创建时间" show-overflow-tooltip width="180">
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <!-- <el-button icon='el-icon-bell' type="text" @click="handleNotice(scope.row)">通知
                                </el-button> -->
                                <el-button  size="mini" type="normal" @click="edit(scope.row)">编辑</el-button>
                                <el-button  size="mini" type="danger" >删除</el-button>
                            </template>

                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <div class="pagination">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="find.PageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="find.PageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="SCount">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
            <el-dialog title="添加消息" :visible.sync="dialogFormVisible">
                <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
                    <el-form-item label="标题" prop="noticeTitle">
                        <el-input v-model="formData.noticeTitle" placeholder="请输入标题" :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                    <el-form-item label="通知内容" prop="noticeContent">
                        <el-input v-model="formData.noticeContent" placeholder="请输入通知内容"
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="userType">
                        <el-select v-model="formData.userType" placeholder="请选择类型"
                            :style="{ width: '100%', height: '100%' }">
                            <el-option style="height: 50%" value="1" label="公告"></el-option>
                            <el-option style="height: 50%" value="2" label="通知"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="通知渠道" prop="noticeBute">
                        <el-select v-model="formData.noticeBute" placeholder="请选择通知渠道"
                            :style="{ width: '100%', height: '100%' }">
                            <el-option style="height: 50%" value="0" label="系统"></el-option>
                            <el-option style="height: 50%" value="1" label="用户"></el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
                <div slot="footer">
                    <el-button @click="close">取消</el-button>
                    <el-button type="primary" @click="AddWebNotice">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { getNoticeList, addNotice } from '@/api/notice.js';
export default {
    data() {
        return {
            //添加消息
            formData: {
                noticeTitle: undefined,
                noticeContent: undefined,
                // noticeBute: '',
                userType: ''
            },
            //公告消息列表
            tableData: [],
            //添加对话框
            dialogFormVisible: false,
            connection: "", //signalr连接
            //分页
            find: {
                NoticeTitle: undefined,
                PageIndex: 1,
                PageSize: 10
            },
            //总行数
            SCount: 0
        };
    },
    methods: {
        //关闭添加用户弹出框
        close() {
            this.dialogFormVisible = false;
        },
        //消息的添加
        AddWebNotice() {
            addNotice(this.formData).then((res) => {
                //console.log("消息添加:", res.code);
                //判断是否成功
                if (res.code > 0) {
                    this.$message({
                        message: '消息添加成功',
                        type: 'success'
                    });
                    //关闭添加对话框
                    this.dialogFormVisible = false;
                    this.Show();
                }
                else {
                    this.$message({
                        message: '消息添加失败',
                        type: 'warning'
                    });
                    this.dialogFormVisible = false;
                }
            })
        },
        // //系统发送消息
        // handleNotice(as) {
        //     let data = {
        //         noticeId: as.noticeId,
        //         noticeTitle: as.noticeTitle,
        //         noticeType: as.noticeType,
        //         noticeContent: as.noticeContent
        //     }
        //     console.log('1', data);
        //     sendNotice(data).then((res) => {
        //         console.log('2', res);
        //         if (res.code = 300) {
        //             this.$message.success('发送成功');
        //         }
        //     })
        // },

        //消息的编辑
        edit: function (row) {
            alert("编辑功能未开发")
            // var session=window.sessionStorage.getItem('loginUserInfo');
            // var sessionData=JSON.parse(session)
            // let data={
            //     Id:row.noticeId,
            //     UserId:sessionData.uId,
            //     MessageType:row.noticeType,
            //     Receiver:sessionData.account,
            //     Sender:'所有用户',
            //     MessageContent:row.noticeContent
            // }
            // console.log(data);
            // this.connection
            //     .invoke("SendMessageToCaller", data)
            //     .catch(function (err) {
            //         return console.error(err);
            //     });
                //let s= this.data.Count();

        },
        //公告消息显示
        Show() {
            getNoticeList(this.find).then((res) => {
                console.log("公告列表数据:", res);
                this.tableData = res.data.pageList;
                this.SCount = res.data.totalCount;
            });
        },
        //页容量
        handleSizeChange(val) {
            this.find.PageSize = val;
            this.Show();
        },
        //上一页下一页
        handleCurrentChange(val) {
            this.find.PageIndex = val;
            this.Show();
        },
        //全选反选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    },
    
    //挂载后
    mounted() {
        //角色权限
        this.Show();
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
